<!--  -->
<route lang="json5" type="page">
{
  layout: false,
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '央国企选岗助手',
  },
}
</route>
<template>
  <view class="mine-page">
    <view
      class="mine-page fixed-bg"
      :style="{
        background: `#FFEFE5`,
      }"
    >
      <image class="w-[100%] h-[400rpx]" :src="bgImg" mode="scaleToFill" />
    </view>
    <view class="mine-page__container">
      <!-- 头部 -->
      <view class="mine-page__header mb-3">
        <button open-type="chooseAvatar" class="image" @chooseavatar="getAvatar">
          <image :src="userInfo.avatar" mode="scaleToFill" />
        </button>

        <view class="mine-page__header__info">
          <template v-if="!isLogined">
            <view class="name"> 立即登录 </view>
            <view class="desc"> 点击登录，开启智能选岗 </view>
          </template>
          <template v-else>
            <view class="name flex items-center gap-2">
              <text>{{ userInfo.nickname }}</text>
              <image
                class="w-[32rpx] h-[32rpx]"
                v-if="userInfo.isMember"
                src="@/assets/images/vip.png"
                mode="scaleToFill"
              />
            </view>

            <view class="desc" @click="toEditName">
              修改名称 <wd-icon name="edit" size="26rpx"></wd-icon>
            </view>
          </template>
        </view>
      </view>
      <!-- vip-btn -->
      <vip-card class="mine-page__vip-card" @click="toPage('/pages-sub/vip/index')">
        <view class="flex justify-between items-center mb-[26rpx]">
          <view class="flex items-center">
            <image
              src="@/assets/images/vip-logo.png"
              class="w-[40rpx] h-[40rpx]"
              mode="scaleToFill"
            />
            <text class="text-[32rpx] ml-[12rpx] text-[#80521A] font-bold">{{
              userInfo.isMember ? 'VIP会员' : '开通会员'
            }}</text>
          </view>
          <view class="rounded-[36rpx] p-[10rpx_32rpx] btn">
            <text class="text-[26rpx] text-[#FFFFFF]"
              >{{ userInfo.isMember ? '续费有礼' : '去开通' }}
            </text>
            <wd-icon name="arrow-right" size="28rpx" color="#FFFFFF"></wd-icon>
          </view>
        </view>

        <text class="text-[#80521A] opacity-50" v-if="!userInfo.isMember">
          享会员专属权益（{{ userInfo.searchNum || 0 }}次）
        </text>
        <text class="text-[#80521A] opacity-50" v-else>
          会员有效期至：{{ dateFormat(userInfo.memberExpireDate, 'YYYY.MM.DD') }}</text
        >
      </vip-card>

      <view class="mine-page__menus">
        <view
          v-for="item in menus"
          :key="item.icon"
          class="flex flex-col justify-center items-center gap-[16rpx]"
          @click="toPage(item.url)"
        >
          <image class="w-[48rpx] h-[48rpx]" :src="item.icon" mode="scaleToFill" />
          <text>{{ item.name }}</text>
        </view>
      </view>

      <view class="mine-page__banner h-[240rpx] mb-3">
        <wd-swiper
          height="240rpx"
          :list="swiperList"
          value-key="url"
          autoplay
          @click="toPage('/pages-sub/consultant/index')"
        ></wd-swiper>
        <!-- <image src="@/assets/images/mine/banner.png" mode="scaleToFill" class="w-full h-full" /> -->
      </view>

      <view class="mine-page__order px-[32rpx]">
        <view
          class="flex justify-between items-center py-[26rpx] border-b-[2rpx] border-[rgba(62,70,84,0.09)] border-b-solid"
          @click="toPage('/pages-sub/myOrder/index')"
        >
          <view class="flex items-center flex-1 gap-[14rpx]">
            <image
              class="w-[40rpx] h-[40rpx]"
              src="@/assets/images/mine/order.png"
              mode="scaleToFill"
            />
            <text class="text-[#191C23]">我的订单</text>
          </view>
          <wd-icon name="arrow-right" color="#9DA2A8" size="32rpx"></wd-icon>
        </view>
        <view class="flex justify-between items-center py-[26rpx]" @click="logout">
          <view class="flex items-center flex-1 gap-[14rpx]">
            <image
              class="w-[40rpx] h-[40rpx]"
              src="@/assets/images/mine/close.png"
              mode="scaleToFill"
            />
            <text class="text-[#191C23]">退出登录</text>
          </view>
          <wd-icon name="arrow-right" color="#9DA2A8" size="32rpx"></wd-icon>
        </view>
      </view>
    </view>

    <sharePopup ref="sharePopupRef" />
  </view>
</template>

<script lang="ts" setup>
  import bgImg from '@/assets/images/mine/mine-bg.png';
  import collectionIcon from '@/assets/images/mine/collection.png';
  import couponIcon from '@/assets/images/mine/coupon.png';
  import consultantIcon from '@/assets/images/mine/consultant.png';
  import shareIcon from '@/assets/images/mine/share.png';
  import { navigateTo } from '@/utils/router';
  import { useUserStore } from '@/store/user';
  import { storeToRefs } from 'pinia';
  import { getEnvBaseUrl } from '@/utils';
  import { ApiLogout } from '@/service/user';
  import { ApiHomeGetBanner } from '@/service/index';
  import { dateFormat } from '@/utils/index';
  import sharePopup from './components/sharePopup.vue';

  const userStore = useUserStore();
  const { userInfo, loginInfo, isLogined } = storeToRefs(userStore);
  const menus = [
    {
      icon: collectionIcon,
      name: '我的收藏',
      url: '/pages-sub/myCollection/index',
    },
    {
      icon: couponIcon,
      name: '激活码兑换',
      url: '/pages-sub/activationCode/index',
    },
    {
      icon: consultantIcon,
      name: '课程顾问',
      url: '/pages-sub/consultant/index',
    },
    {
      icon: shareIcon,
      name: '分享给好友',
      url: 'share',
    },
  ];

  const swiperList = ref([]);
  const sharePopupRef = ref();

  const toEditName = () => {
    uni.showModal({
      editable: true,
      title: '修改用户名',
      placeholderText: '请输入用户名，最多 20个字符',
      confirmText: '确认修改',
      success: async ({ confirm, content }) => {
        if (confirm) {
          await userStore.updateUserInfo({
            nickname: content,
          });
          uni.showToast({
            title: '修改成功',
          });
        }
      },
    });
  };

  const getAvatar = (res) => {
    const { avatarUrl } = res.detail;
    uni.uploadFile({
      url: getEnvBaseUrl() + '/app-api/infra/file/upload',
      filePath: avatarUrl,
      name: 'file',
      header: {
        Authorization: `Bearer ${loginInfo.value.token}`,
        'tenant-id': 1,
      },
      success: async ({ data, statusCode }) => {
        console.log(data);
        if (statusCode === 200) {
          const avatar = JSON.parse(data)?.data;
          uni.showToast({
            title: '上传成功',
          });
          console.log(avatar);
          await userStore.updateUserInfo({
            avatar,
          });
        }
      },
      fail: (error) => {},
    });
  };
  const toPage = (url: string) => {
    if (url === 'share') {
      sharePopupRef.value.show();
      return;
    }
    navigateTo(url);
  };
  const logout = () => {
    uni.showModal({
      title: '退出登录',
      content: '是否退出当前账号？',
      success: async ({ confirm }) => {
        if (confirm) {
          await ApiLogout();
          userStore.clearUserInfo();
        }
      },
    });
  };

  onMounted(async () => {
    const res = await ApiHomeGetBanner();
    swiperList.value = res.data as any;
  });
</script>

<style lang="scss" scoped>
  .mine-page {
    font-size: 28rpx;
    &__container {
      padding: 64rpx 32rpx 32rpx;
    }
    &__header {
      display: flex;
      padding: 0 24rpx;
      & > .image {
        width: 128rpx;
        height: 128rpx;
        border-radius: 50%;
        flex-shrink: 0;
        margin-right: 24rpx;
        border: 2rpx solid rgba(62, 70, 84, 0.18);
        overflow: hidden;
        position: relative;
        padding: 0;
        .icon {
          position: absolute;
          top: 0;
          left: 0;
        }
      }
      &__info {
        flex: 1 0 0;
        padding: 8rpx 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .name {
          font-weight: 600;
          font-size: 34rpx;
          color: #26292c;
          & > text {
            background: linear-gradient(208.9590659984928deg, #ac6836 0%, #84541f 100%);
            background-clip: text;
            color: transparent;
          }
        }
        .desc {
          color: $uni-color-subtitle;
        }
      }
    }

    &__vip-card {
      .btn {
        background: linear-gradient(270deg, #b66d3c 0%, #80521c 100%);
        display: flex;
        align-items: center;
        gap: 8rpx;
        z-index: 9;
      }
    }

    &__menus {
      background: #ffffff;
      border-radius: 20rpx;
      border: 2rpx solid rgba(62, 70, 84, 0.09);
      display: flex;
      justify-content: space-evenly;
      padding: 32rpx 0;
      margin: 24rpx 0;
      & > view {
        text {
          color: $uni-color-title;
        }
      }
    }
    &__order {
      background: #ffffff;
      border-radius: 20rpx;
      border: 2rpx solid rgba(62, 70, 84, 0.09);
    }
  }
  .share {
    padding-bottom: 72rpx;
    font-size: 34rpx;
    color: #191919;
    & > view {
      padding: 32rpx 0;
      text-align: center;
      border-bottom: 2rpx solid rgba($color: #000000, $alpha: 0.1);
      &:last-child {
        border-bottom: none;
        border-top: 16rpx solid #f2f2f2;
      }
    }
  }
</style>
